<template>
  <div class="spaceCategoryAnalyze">
    <a-card title="空间资源使用分析">
      <v-chart :option="options" style="height: 320px; max-width: 100%; text-align: center">
      </v-chart>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, ref, watchEffect } from 'vue'
import { getSpaceCategoryAnalyzeUsingPost } from '@/api/spaceAnalyzeController'
import { message } from 'ant-design-vue'
interface Props {
  queryAll?: boolean
  spaceId?: number
  queryPublic: boolean
}
const props = withDefaults(defineProps<Props>(), { queryAll: false, queryPublic: false })

const loading = ref(false)

//图表数据

const dataList = ref<API.SpaceCategoryAnalyzeResponse[]>([])
const fetchData = async () => {
  loading.value = true
  try {
    const res = await getSpaceCategoryAnalyzeUsingPost({
      queryAll: props.queryAll,
      spaceId: props.spaceId,
      queryPublic: props.queryPublic,
    })
    if (res.data.code === 200 && res.data.data) {
      dataList.value = res.data.data ?? []
    } else {
      message.error('获取数据失败' + res.data.message)
    }
  } catch (err) {
    message.error('获取数据失败' + err)
  }
  loading.value = false
}
//参数改变时，要改变a获取数据
watchEffect(() => {
  fetchData()
})

//配置参数
const options = computed(() => {
  const categories = dataList.value.map((item) => item.category)
  const countData = dataList.value.map((item) => item.count)
  const sizeData = dataList.value.map((item) => (item.totalSize / (1024 * 1024)).toFixed(2)) // 转为 MB

  return {
    tooltip: { trigger: 'axis' },
    legend: { data: ['图片数量', '图片总大小'], top: 'bottom' },
    xAxis: { type: 'category', data: categories },
    yAxis: [
      {
        type: 'value',
        name: '图片数量',
        axisLine: { show: true, lineStyle: { color: '#5470C6' } }, // 左轴颜色
      },
      {
        type: 'value',
        name: '图片总大小 (MB)',
        position: 'right',
        axisLine: { show: true, lineStyle: { color: '#91CC75' } }, // 右轴颜色
        splitLine: {
          lineStyle: {
            color: '#91CC75', // 调整网格线颜色
            type: 'dashed', // 线条样式：可选 'solid', 'dashed', 'dotted'
          },
        },
      },
    ],
    series: [
      { name: '图片数量', type: 'bar', data: countData, yAxisIndex: 0, barMaxWidth: 30 },
      { name: '图片总大小', type: 'bar', data: sizeData, yAxisIndex: 1, barMaxWidth: 30 },
    ],
  }
})
</script>